import React from 'react'
import { Table } from 'antd'
import moment from 'moment'
import RoleList from '../List'
import GeneralFilter from '../../../components/Filter/GeneralFilter'

const UserList = ({
  onSelectUserRows,
  showRole,
  showRolesModal,
  roles,
  rolesModalVisible,
  dataSourceByDistributor,
  dataSourceByLwj,
  selectedRowKeys,
  dispatch,
  loading,
  currentItem
}) => {
  const showDetail = (record) => {
    showRole(record)
    showRolesModal(true)
  }
  console.log(currentItem)
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'displayName',
        title: '名称',
        placeholder: '名称'
      },
      {
        type: 'input',
        id: 'mobile',
        title: '手机',
        placeholder: '手机'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'userManage/onChoose',
        payload: {
          organizationId: currentItem.organizationId,
          ...value
        }
      })
    }
  }

  const columns = [
    {
      title: '用户名称',
      dataIndex: 'displayName',
      key: 'displayName',
      width: 150
    }, {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
      width: 150
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 150,
      render: (text, record, index) => (moment(record.createTime).format('YYYY-MM-DD HH:mm:ss'))
    }, {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 100,
      render: (text, record) => (<span><a href="javascript:" onClick={() => { showDetail(record) }}>查看角色</a></span>)
    }
  ]

  const rowSelection = {
    type: 'check',
    onChange: onSelectUserRows,
    selectedRowKeys
  }

  return (
    <div>
      {rolesModalVisible && <RoleList loading={loading} roles={roles} rolesModalVisible={rolesModalVisible} showRolesModal={showRolesModal} />}
      <GeneralFilter {...filterProps} />
      <h4>门店员工列表</h4>
      <Table
        loading={loading.global}
        pagination={false}
        dataSource={dataSourceByDistributor}
        columns={columns}
        rowKey={record => record.id}
        rowSelection={rowSelection}
        scroll={{ y: 200 }}
        size="small" />
      <h4 style={{ marginTop: 10 }}>丽维家员工列表</h4>
      <Table
        loading={loading.global}
        pagination={false}
        dataSource={dataSourceByLwj}
        columns={columns}
        rowKey={record => record.id + 1}
        rowSelection={rowSelection}
        scroll={{ y: 200 }}
        size="small" />
    </div>
  )
}

export default UserList
